<template>
  <el-card shadow="always" class="classBox">
    <!-- 头部表格区域 -->
    <el-row type="flex" justify="space-between">
      <el-col>
        <el-form :inline="true" class="demo-form-inline" :model="formData">
          <el-form-item>
            <el-input v-model="formData.student_name" placeholder="学生姓名" clearable @clear="clearFn" />
          </el-form-item>
          <el-form-item>
            <el-select v-model="formData.subject_id" placeholder="归属学科" clearable @clear="clearFn" @change="changeFn">
              <el-option v-for="item in subjectInfo" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formData.class_id" placeholder="归属班级" clearable @clear="clearFn">
              <el-option v-for="item in className" :key="item.id" :label="item.class_name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formData.student_state" placeholder="账号状态" clearable @clear="clearFn">
              <el-option v-for="item in accountState" :key="item.id" :label="item.value" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button plain type="primary" size="small" @click="searchFn">搜索</el-button>
            <el-button size="small" @click="resetFn">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4">
        <el-row type="flex" justify="end">
          <el-button type="warning" plain @click="$refs.uploadExcel.showDialog = true">批量导入</el-button>
          <el-button plain type="primary" @click="$refs.addStudent.showDialog = true">增加学员</el-button>
        </el-row>
      </el-col>
    </el-row>
    <!-- 下部表格区域 -->
    <el-row v-if="selection.length" style="margin-bottom: 10px">
      <el-button type="success" @click="allOpen">批量启用</el-button>
      <el-button type="warning" @click="allStop">批量禁用</el-button>
      <el-button type="danger" @click="allDel">批量删除</el-button>
    </el-row>
    <el-row type="flex">
      <el-table
        ref="multipleTable"
        empty-text="暂无数据"
        border
        :data="tableData"
        style="width: 100%"
        @select="selectFn"
        @select-all="selectAllFn"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        />
        <el-table-column
          prop="address"
          width="100"
          type="index"
          label="序号"
          align="center"
        />
        <el-table-column
          prop="student_name"
          width="130"
          label="学生姓名"
          align="center"
        />
        <el-table-column
          prop="student_phone"
          width="130"
          label="手机号"
          align="center"
        />
        <el-table-column
          prop="class_name"
          width="130"
          label="班级名称"
          align="center"
        />
        <el-table-column
          prop="subject_name"
          width="130"
          label="学科名称"
          align="center"
        />
        <el-table-column
          prop="student_sex"
          width="130"
          label="性别"
          align="center"
        >
          <template slot-scope="{ row }">
            <span v-if="row.student_sex === 1">男</span>
            <span v-else>女</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="student_state"
          width="150"
          label="状态"
          align="center"
        >
          <template slot-scope="{ row }">
            <el-tag v-if="row.student_state === 1" type="warning">待审核</el-tag>
            <el-tag v-else-if="row.student_state === 2" type="success">正常</el-tag>
            <el-tag v-else type="info">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="username"
          width="140"
          label="创建人"
          align="center"
        />
        <el-table-column
          prop="created_at"
          width="160"
          label="创建时间"
          align="center"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="130"
          align="center"
        >
          <template slot-scope="{ row }">
            <el-button type="primary" icon="el-icon-edit" circle @click="editClass(row)" />
            <el-button type="danger" icon="el-icon-delete" circle @click="delClass(row)" />
          </template>
        </el-table-column>
      </el-table>

    </el-row>
    <!-- 底部分页器 -->
    <el-row type="flex" justify="center" align="middle" style="height: 60px; margin-top: 30px">
      <span>共{{ page.total }}条</span>
      <el-pagination
        background
        :page-sizes="[10,20,30,50]"
        :current-page="page.page"
        :page-size="page.limit"
        :total="page.total"
        layout="sizes,prev, pager, next,jumper"
        @current-change="pageChange"
        @size-change="sizeChange"
      />
    </el-row>
    <!-- 新增编辑弹层组件 -->
    <add-student-info ref="addStudent" />
    <!-- 批量导入弹层组件 -->
    <upload-excel ref="uploadExcel" :page="page" :table-data="tableData" />
  </el-card>
</template>
<script>
import { getStudentInfo, delStudentInfo, getStudentInfoById, getClassInfo, editDataAll } from '@/api/class'
import AddStudentInfo from './components/AddStudentInfo.vue'
import UploadExcel from '@/components/UploadExcel'
import { mapGetters } from 'vuex'
export default {
  name: 'StudentInfo',
  components: {
    AddStudentInfo,
    UploadExcel
  },
  props: {},
  data() {
    return {
      selection: [], // 单选多选框数据
      formData: {}, // 搜索表单数据
      tableData: [], // 表格数据
      className: [], // 班级名称
      page: {
        page: 1,
        limit: 10,
        total: 0
      },
      accountState: [
        { id: 1, value: '待审核' },
        { id: 2, value: '正常' },
        { id: 3, value: '禁用' }
      ]
    }
  },
  computed: {
    ...mapGetters(['subjectInfo'])
  },
  watch: {},
  created() {
    this.getStudentInfo()
    this.$store.dispatch('class/getSubjectInfo')
  },
  mounted() {},
  methods: {
    // 获取学生信息
    async getStudentInfo() {
      const { data } = await getStudentInfo(this.page)
      this.tableData = data.list
      this.page.total = data.total
    },
    // 页码改变事件
    pageChange(newPage) {
      this.page.page = newPage
      this.getStudentInfo()
    },
    // 每页数量改变事件
    sizeChange(newSize) {
      this.page.limit = newSize
      this.getStudentInfo()
    },
    // 编辑
    async editClass(row) {
      const { data } = await getStudentInfoById(row.id)
      this.$refs.addStudent.formData = { ...data, id: row.id }
      this.$refs.addStudent.showDialog = true
    },
    // 删除
    async delClass(row) {
      await this.$confirm('确认删除该学生信息吗?')
      await delStudentInfo({ id: [[row.id]] })
      this.$message.success('删除成功')
      if (this.page.page !== 1 && this.tableData.length === 1) {
        this.page.page--
      }
      this.getStudentInfo()
    },
    // 触发表单clearable事件
    clearFn() {
      this.searchFn()
    },
    // 下拉选择框值发生改变事事件
    async changeFn(val) {
      // console.log(val)
      const { data } = await getClassInfo({
        subject_id: val,
        page: 1,
        limit: 1000
      })
      // console.log(data)
      // 赋值班级名称
      this.className = data.list
    },
    // 点击搜索事件
    async searchFn() {
      const { data } = await getStudentInfo({
        ...this.formData, ...this.page
      })
      // console.log(data)
      this.tableData = data.list
      this.page.total = data.total
      this.page.page = 1
    },
    // 点击重置事件
    resetFn() {
      this.formData = {}
      this.searchFn()
    },
    // 手动勾选单项触发事件
    selectFn(selection, row) {
      // console.log(selection)
      this.selection = selection
    },
    // 手动勾选全选触发事件
    selectAllFn(selection) {
      // console.log(selection)
      this.selection = selection
    },
    async allOpen() {
      await this.$confirm(`确定批量启用这${this.selection.length}条数据吗？`)
      const arr = []
      this.selection.forEach(item => {
        return arr.push(item.id)
      })
      // console.log(arr)
      await editDataAll({
        id: arr,
        status: 2
      })
      this.selection = []
      this.$message.success('批量启用成功')
      this.getStudentInfo()
    },
    async allStop() {
      await this.$confirm(`确定批量禁用这${this.selection.length}条数据吗？`)
      const arr = []
      this.selection.forEach(item => {
        return arr.push(item.id)
      })
      // console.log(arr)
      await editDataAll({
        id: arr,
        status: 3
      })
      this.selection = []
      this.$message.success('批量禁用成功')
      this.getStudentInfo()
    },
    async allDel() {
      await this.$confirm(`确定批量删除这${this.selection.length}条数据吗？`)
      const arr = []
      this.selection.forEach(item => {
        return arr.push(item.id)
      })
      await delStudentInfo({
        id: arr
      })
      this.$message.success('批量删除成功')
      this.selection.length = 0
      this.getStudentInfo()
    }
  }
}
</script>
<style  lang='scss' scoped>
.classBox {
  margin: 20px;
  background-color: #fff;
}
</style>
